<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css" rel="stylesheet">
    <title>综合算式拼图游戏</title>
    <style>
       .draggable {
            cursor: grab;
        }

       .dragging {
            cursor: grabbing;
        }

       .droppable {
            border: 2px dashed #ccc;
            min-height: 50px;
            display: flex;
            align-items: center;
            justify-content: center;
        }

       .piece-waiting-area {
            min-height: 50px;
            display: flex;
            justify-content: center;
            align-items: center;
            gap: 10px;
        }
    </style>
</head>

<body class="bg-gray-100 p-8">
    <div class="container mx-auto bg-white p-8 rounded shadow-md">
        <h1 class="text-3xl font-bold text-center mb-8">综合算式拼图游戏</h1>
        <div class="flex justify-center space-x-4 mb-4">
            <button id="easyBtn" class="bg-yellow-500 text-white p-2 rounded hover:bg-yellow-600">简单难度</button>
            <button id="hardBtn" class="bg-red-500 text-white p-2 rounded hover:bg-red-600">困难难度</button>
            <button id="appBtn" class="bg-blue-500 text-white p-2 rounded hover:bg-blue-600">应用题目</button>
            <button id="exitBtn" class="bg-gray-500 text-white p-2 rounded hover:bg-gray-600">退出题目</button>
            <button id="hintBtn" class="bg-purple-500 text-white p-2 rounded hover:bg-purple-600">智能提示</button>
        </div>
        <p id="question" class="text-lg text-center mb-4"></p>
        <div id="puzzlePieces" class="piece-waiting-area mb-8"></div>
        <div class="droppable mx-auto w-1/2 mb-8"></div>
        <div class="text-center">
            <button id="checkBtn" class="bg-green-500 text-white p-2 rounded hover:bg-green-600">检查答案</button>
            <div id="result" class="mt-4"></div>
        </div>
    </div>
    <script>
        const easyQuestions = [
            {
                question: '计算 85 减 27 再加 13 的结果，列出综合算式。',
                pieces: ['85', '-', '27', '+', '13'],
                answer: '85 - 27 + 13',
                hint: '按照从左到右的顺序依次计算哦。',
                explanation: '这是同级运算，从左到右依次计算，先算 85 - 27 = 58，再算 58 + 13 = 71。'
            },
            {
                question: '计算 18 加 32 再减 25 的结果，列出综合算式。',
                pieces: ['18', '+', '32', '-', '25'],
                answer: '18 + 32 - 25',
                hint: '同样是从左到右依次计算。',
                explanation: '从左到右依次计算，18 + 32 = 50，50 - 25 = 25。'
            },
            {
                question: '计算 48 除以 6 再乘 3 的结果，列出综合算式。',
                pieces: ['48', '÷', '6', '×', '3'],
                answer: '48 / 6 * 3',
                hint: '同级运算，从左到右算。',
                explanation: '先算 48 ÷ 6 = 8，再算 8 × 3 = 24。'
            },
            {
                question: '计算 9 乘 2 再除以 6 的结果，列出综合算式。',
                pieces: ['9', '×', '2', '÷', '6'],
                answer: '9 * 2 / 6',
                hint: '从左到右依次运算。',
                explanation: '先算 9 × 2 = 18，再算 18 ÷ 6 = 3。'
            },
            {
                question: '计算 42 加 16 除以 4 的结果，列出综合算式。',
                pieces: ['42', '+', '16', '÷', '4'],
                answer: '42 + 16 / 4',
                hint: '先算除法，再算加法。',
                explanation: '先算 16 ÷ 4 = 4，再算 42 + 4 = 46。'
            },
            {
                question: '计算 72 除以 8 再减 5 的结果，列出综合算式。',
                pieces: ['72', '÷', '8', '-', '5'],
                answer: '72 / 8 - 5',
                hint: '先算除法，后算减法。',
                explanation: '先算 72 ÷ 8 = 9，再算 9 - 5 = 4。'
            },
            {
                question: '计算 3 乘 7 再减 18 的结果，列出综合算式。',
                pieces: ['3', '×', '7', '-', '18'],
                answer: '3 * 7 - 18',
                hint: '先乘后减。',
                explanation: '先算 3 × 7 = 21，再算 21 - 18 = 3。'
            },
            {
                question: '计算 23 加 4 乘 6 的结果，列出综合算式。',
                pieces: ['23', '+', '4', '×', '6'],
                answer: '23 + 4 * 6',
                hint: '先乘后加。',
                explanation: '先算 4 × 6 = 24，再算 23 + 24 = 47。'
            }
        ];

        const hardQuestions = [
            {
                question: '计算 18 与 24 的和除以 6 的结果，列出综合算式。',
                pieces: ['(', '18', '+', '24', ')', '÷', '6'],
                answer: '(18 + 24) / 6',
                hint: '先算括号里的加法，再算除法。',
                explanation: '先算括号内 18 + 24 = 42，再算 42 ÷ 6 = 7。'
            },
            {
                question: '计算 7 乘 35 减 28 的差的结果，列出综合算式。',
                pieces: ['7', '×', '(', '35', '-', '28', ')'],
                answer: '7 * (35 - 28)',
                hint: '先算括号里的减法，再算乘法。',
                explanation: '先算括号内 35 - 28 = 7，再算 7 × 7 = 49。'
            },
            {
                question: '计算 88 减去 33 与 27 的和的结果，列出综合算式。',
                pieces: ['88', '-', '(', '33', '+', '27', ')'],
                answer: '88 - (33 + 27)',
                hint: '先算括号里的加法，再算减法。',
                explanation: '先算括号内 33 + 27 = 60，再算 88 - 60 = 28。'
            },
            {
                question: '计算 5 乘 40 除以 8 的商的结果，列出综合算式。',
                pieces: ['5', '×', '(', '40', '÷', '8', ')'],
                answer: '5 * (40 / 8)',
                hint: '先算括号里的除法，再算乘法。',
                explanation: '先算括号内 40 ÷ 8 = 5，再算 5 × 5 = 25。'
            }
        ];

        const appQuestions = [
            {
                question: '学校体育组买了 23 个篮球，17 个足球，把这些球每 5 个装一箱，需要多少个箱子？列出综合算式。',
                pieces: ['(', '23', '+', '17', ')', '÷', '5'],
                answer: '(23 + 17) / 5',
                hint: '先算出球的总数，再用总数除以每箱装的个数。',
                explanation: '先算球的总数 23 + 17 = 40，再算箱子数 40 ÷ 5 = 8。'
            },
            {
                question: '小明有 80 元零花钱，买文具花了 35 元，剩下的钱用来买 5 元一本的笔记本，可以买几本？列出综合算式。',
                pieces: ['(', '80', '-', '35', ')', '÷', '5'],
                answer: '(80 - 35) / 5',
                hint: '先算出剩下的钱，再用剩下的钱除以笔记本单价。',
                explanation: '先算剩下的钱 80 - 35 = 45，再算笔记本数量 45 ÷ 5 = 9。'
            }
        ];

        const easyBtn = document.getElementById('easyBtn');
        const hardBtn = document.getElementById('hardBtn');
        const appBtn = document.getElementById('appBtn');
        const exitBtn = document.getElementById('exitBtn');
        const hintBtn = document.getElementById('hintBtn');
        const questionPara = document.getElementById('question');
        const puzzlePiecesDiv = document.getElementById('puzzlePieces');
        const droppable = document.querySelector('.droppable');
        const checkBtn = document.getElementById('checkBtn');
        const resultDiv = document.getElementById('result');
        let currentQuestion;
        let consecutiveCorrect = 0;
        let consecutiveWrong = 0;
        let draggingElement;

        function shuffleArray(array) {
            for (let i = array.length - 1; i > 0; i--) {
                const j = Math.floor(Math.random() * (i + 1));
                [array[i], array[j]] = [array[j], array[i]];
            }
            return array;
        }

        function setupQuestion(questions) {
            const randomIndex = Math.floor(Math.random() * questions.length);
            currentQuestion = questions[randomIndex];
            questionPara.textContent = currentQuestion.question;
            puzzlePiecesDiv.innerHTML = '';
            droppable.innerHTML = '';
            resultDiv.textContent = '';

            const shuffledPieces = shuffleArray([...currentQuestion.pieces]);

            shuffledPieces.forEach(piece => {
                const pieceDiv = document.createElement('div');
                pieceDiv.classList.add('draggable', 'bg-blue-200', 'p-2', 'rounded');
                pieceDiv.draggable = true;
                pieceDiv.textContent = piece;
                puzzlePiecesDiv.appendChild(pieceDiv);

                pieceDiv.addEventListener('touchstart', touchStartHandler);
                pieceDiv.addEventListener('dragstart', dragStartHandler);
            });

            droppable.addEventListener('dragover', dragOverHandler);
            droppable.addEventListener('drop', dropHandler);
            droppable.addEventListener('touchmove', touchMoveHandler);
            droppable.addEventListener('touchend', touchEndHandler);

            puzzlePiecesDiv.addEventListener('dragover', dragOverHandler);
            puzzlePiecesDiv.addEventListener('drop', dropHandler);
            puzzlePiecesDiv.addEventListener('touchmove', touchMoveHandler);
            puzzlePiecesDiv.addEventListener('touchend', touchEndHandler);
        }

        function dragStartHandler(e) {
            draggingElement = e.target;
            e.target.classList.add('dragging');
        }

        function touchStartHandler(e) {
            draggingElement = e.target;
            e.target.classList.add('dragging');
        }

        function dragOverHandler(e) {
            e.preventDefault();
        }

        function touchMoveHandler(e) {
            e.preventDefault();
        }

        function dropHandler(e) {
            e.preventDefault();
            const target = e.target.closest('.droppable, .piece-waiting-area');
            if (target) {
                target.appendChild(draggingElement);
                draggingElement.classList.remove('dragging');
            }
        }

        function touchEndHandler(e) {
            e.preventDefault();
            const target = document.elementFromPoint(e.changedTouches[0].clientX, e.changedTouches[0].clientY);
            const dropTarget = target.closest('.droppable, .piece-waiting-area');
            if (dropTarget) {
                dropTarget.appendChild(draggingElement);
                draggingElement.classList.remove('dragging');
            }
        }

        function evaluateExpression(expression) {
            const convertedExpression = expression.replace(/×/g, '*').replace(/÷/g, '/');
            try {
                return Function('"use strict";return (' + convertedExpression + ')')();
            } catch (error) {
                return null;
            }
        }

        checkBtn.addEventListener('click', () => {
            const userAnswer = Array.from(droppable.children).map(child => child.textContent).join('');
            const userResult = evaluateExpression(userAnswer);
            const correctResult = evaluateExpression(currentQuestion.answer);

            if (userResult!== null && userResult === correctResult) {
                resultDiv.textContent = '恭喜你，回答正确！';
                resultDiv.classList.add('text-green-500');
                resultDiv.classList.remove('text-red-500');
                consecutiveCorrect++;
                consecutiveWrong = 0;
                if (consecutiveCorrect >= 3 && currentQuestion === easyQuestions) {
                    setupQuestion(hardQuestions);
                    consecutiveCorrect = 0;
                }
            } else {
                resultDiv.textContent = '回答错误，请重新尝试。';
                resultDiv.classList.add('text-red-500');
                resultDiv.classList.remove('text-green-500');
                consecutiveWrong++;
                consecutiveCorrect = 0;
                if (consecutiveWrong >= 3 && currentQuestion === hardQuestions) {
                    setupQuestion(easyQuestions);
                    consecutiveWrong = 0;
                }
                resultDiv.innerHTML += `<br>错误解释：${currentQuestion.explanation}`;
            }
        });

        hintBtn.addEventListener('click', () => {
            resultDiv.textContent = `提示：${currentQuestion.hint}`;
            resultDiv.classList.add('text-yellow-500');
            resultDiv.classList.remove('text-green-500', 'text-red-500');
        });

        easyBtn.addEventListener('click', () => {
            setupQuestion(easyQuestions);
        });

        hardBtn.addEventListener('click', () => {
            setupQuestion(hardQuestions);
        });

        appBtn.addEventListener('click', () => {
            setupQuestion(appQuestions);
        });

        exitBtn.addEventListener('click', () => {
            questionPara.textContent = '';
            puzzlePiecesDiv.innerHTML = '';
            droppable.innerHTML = '';
            resultDiv.textContent = '';
        });
    </script>
</body>

</html>    